<template>
	<view class="integralExchange">
		<!-- <u-swiper :list="goods_img_list" height="200" mode="number" indicator-pos="bottomRight" border-radius="0"></u-swiper> -->
		
		<view class="adImage">
			<image src="http://xcx.tfxiaochengxu.com/2021-01-07_5ff5f3d69c17f.jpg" mode="aspectFill"></image>
		</view>
		
		<view class="tabBox" :id="id">
			<!-- <u-tabs :list="tabList" :current="current" active-color="#fe0000" @change="tabChange"></u-tabs> -->
			<view class="u-tab-item tabItemStyle u-line-1" :id="'u-tab-item-all'" :class="current == -1 ? 'active' : ''" @tap="clickTab(-1)">全部</view>
			<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
				<view class="u-scroll-box">
					<view class="u-tab-item tabItemStyle u-line-1" :class="current == index ? 'active' : ''" :id="'u-tab-item-' + index" v-for="(item, index) in tabList" :key="index" @tap="clickTab(index)">
						{{ item['name']}}
					</view>
				</view>
				<view class="u-tab-bar" :style="[tabBarStyle]"></view>
			</scroll-view>
		</view>
		
		<scroll-view scroll-y class="goodsList">
			<view class="item flex_space_b" v-for="(item, index) in goods_list" :key="index" @click="goDetails()">
				<view class="imageBox">
					<u-image width="200rpx" height="200rpx" border-radius="12" src="http://xcx.tfxiaochengxu.com/2021-01-07_5ff5f3d67dd46.jpg"></u-image>
					<view class="mask flex_conter_c">
						<image class="soldOut" src="/static/soldOut.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="info flex_conter_c">
					<view class="flex1 goodsInfoBox">
						<view class="title u-line-2">品牌团仅16.9【谜草集】牛奶沐浴露800ml【限量5单】</view>
						<view class="data">
							<view class="flex">
								<view class="price">￥<text>16.90</text></view>
								<view class="original">￥79.00</view>
							</view>
							<view class="bottoBox">
								<!-- <view class="surplus">库存<text>5</text>个</view> -->
								<view class="subsidy">
									积分抵扣:<text>16.32%</text>
									<text class="line">|</text> 
									<text>￥10.59</text>到手
								</view>
							</view>
							<view class="car flex_conter_c">
								<u-icon name="gouwuche" custom-prefix="custom-icon" size="28" color="#fe0000"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
				// goods_img_list: ['http://xcx.tfxiaochengxu.com/2021-01-07_5ff5f3d69c17f.jpg', 'http://xcx.tfxiaochengxu.com/2021-01-07_5ff5f3d6b520a.jpg', 'http://xcx.tfxiaochengxu.com/2021-01-07_5ff5f3d6cdbab.jpg'],
				tabList: [{
					name: '热门'
				}, {
					name: '购物'
				}, {
					name: '美食'
				}, {
					name: '生活'
				}, {
					name: '充值'
				}, {
					name: '大牌'
				}, {
					name: '数码'
				}],
				current: -1,
				
				scrollLeft: 0, // 滚动scroll-view的左边滚动距离
				tabQueryInfo: [], // 存放对tab菜单查询后的节点信息
				componentWidth: 0, // 屏幕宽度，单位为px
				parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
				id: this.$u.guid(), // id值
				scrollBarLeft: 17, // 移动bar需要通过translateX()移动的距离
				barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
				duration: 0.5, // 过渡动画时长, 单位ms
			}
		},
		methods: {
			goDetails(idx) {
				uni.navigateTo({
					url: '/pagesB/index/integralDetails?goods_id=' + 195
				})
			},
			tabChange (index) {
				this.current = index;
			},
			// 设置一个init方法，方便多处调用
			async init() {
				// 获取tabs组件的尺寸信息
				let tabRect = await this.$uGetRect('#' + this.id);
				// tabs组件距离屏幕左边的宽度
				this.parentLeft = tabRect.left;
				// tabs组件的宽度
				this.componentWidth = tabRect.width;
				this.getTabRect();
			},
			// 查询tab的布局信息
			getTabRect() {
				// 创建节点查询
				let query = uni.createSelectorQuery().in(this);
				// 历遍所有tab，这里是执行了查询，最终使用exec()会一次性返回查询的数组结果
				for (let i = 0; i < this.tabList.length; i++) {
					// 只要size和rect两个参数
					query.select(`#u-tab-item-${i}`).fields({
						size: true,
						rect: true
					});
				}
				// 执行查询，一次性获取多个结果
				query.exec(
					function(res) {
						this.tabQueryInfo = res;
						// 初始化滚动条和移动bar的位置
						this.scrollByIndex();
					}.bind(this)
				);
			},
			clickTab(index) {
				// 点击当前活动tab，不触发事件
				if(index == this.current) return ;
				if(index == -1) {
					this.scrollLeft = 0
					this.scrollBarLeft = 17
				}
				this.current = index;
			},
			scrollByIndex() {
				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
				let tabInfo = this.tabQueryInfo[this.current];
				if (!tabInfo) return;
				// 活动tab的宽度
				let tabWidth = tabInfo.width;
				// 活动item的左边到tabs组件左边的距离，用item的left减去tabs的left
				let offsetLeft = tabInfo.left - this.parentLeft;
				// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
				let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2;
				this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft;
				// 当前活动item的中点点到左边的距离减去滑块宽度的一半，即可得到滑块所需的移动距离
				let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft;
				// 计算当前活跃item到组件左边的距离
				this.scrollBarLeft = left - uni.upx2px(40) / 2;
				// 第一次移动滑块的时候，barFirstTimeMove为true，放到延时中将其设置false
				// 延时是因为scrollBarLeft作用于computed计算时，需要一个过程需，否则导致出错
				if(this.barFirstTimeMove == true) {
					setTimeout(() => {
						this.barFirstTimeMove = false;
					}, 100)
				}
			}
		},
		computed: {
			// 移动bar的样式
			tabBarStyle() {
				let style = {
					width: '40rpx',
					transform: `translate(${this.scrollBarLeft}px, -100%)`,
					// 滑块在页面渲染后第一次滑动时，无需动画效果
					'transition-duration': `0s`,
					'background-color': '#fe0000',
					height: '6rpx',
					// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
					'border-radius': `${6 / 2}px`
				};
				if (this.current == -1) {
					style.zIndex = '3';
					style.position = 'fixed';
					style.top = '280rpx'
				} else {
					style.zIndex = '1';
					style.position = 'absolute';
					style.top = '80rpx'
				}
				return style;
			},
			// tab的样式
			tabItemStyle() {
				return (index) => {
					let style = {
						height: '80rpx',
						'line-height': '80rpx',
						'font-size': '30rpx',
						'transition-duration': `0.5s`,
						padding: `0 40rpx`,
						flex: '1',
						width: 'auto'
					};
					// 字体加粗
					if (index == this.current) {
						style.fontWeight = 'bold';
						style.color = '#fe0000';
					}
					return style;
				}
			}
		},
		watch: {
			// 监听tab的变化，重新计算tab菜单的布局信息，因为实际使用中菜单可能是通过
			// 后台获取的（如新闻app顶部的菜单），获取返回需要一定时间，所以list变化时，重新获取布局信息
			tabList(n, o) {
				// list变动时，重制内部索引，否则可能导致超出数组边界的情况
				if(n.length !== o.length) this.current = 0;
				// 用$nextTick等待视图更新完毕后再计算tab的局部信息，否则可能因为tab还没生成就获取，就会有问题
				this.$nextTick(() => {
					this.init();
				});
			},
			current: {
				immediate: true,
				handler(nVal, oVal) {
					// 视图更新后再执行移动操作
					this.$nextTick(() => {
						this.scrollByIndex();
					});
				}
			},
		},
		onLoad() {
			this.init();
		}
	}
</script>

<style scoped lang="scss">

.u-scroll-view {
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
	position: relative;
}
.u-scroll-box {
	height: 80rpx;
	padding-left: 116rpx;
	position: relative;
	/* #ifdef MP-TOUTIAO */
	white-space: nowrap;
	/* #endif */
}
#u-tab-item-all {
	position: fixed;
	left: 0;
	top: 200rpx;
	background-color: #FFFFFF;
	z-index: 2;
}
#u-tab-item-all::after {
	content: '';
	display: block;
	height: 40rpx;
	width: 2rpx;
	background-color: #EEEEEE;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
.u-tab-item {
	position: relative;
	/* #ifndef APP-NVUE */
	display: inline-block;
	/* #endif */
	text-align: center;
	transition-property: background-color, color;
}
.tabItemStyle {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	transition-duration: 0.5s;
	padding: 0 28rpx;
	flex: 1;
	width: auto;
}
.tabItemStyle.active {
	font-weight: bold;
	color: #fe0000;
}
.u-tab-bar {
	position: absolute;
	top: 80rpx;
}

.adImage {
	width: 750rpx;
	height: 200rpx;
	image {
		width: 750rpx;
		height: 200rpx;
	}
}

.goodsList {
	height: calc(100vh - 280rpx);
	width: 750rpx;
	box-sizing: border-box;
	padding: 24rpx 32rpx 0;
	.item {
		border-radius: 12rpx;
		overflow: hidden;
		.imageBox {
			position: relative;
			overflow: hidden;
			border-radius: 12rpx;
		}
		.info {
			flex: 1;
			padding: 40rpx 20rpx;
			border-bottom: 1rpx solid #EEEEEE;
			height: 260rpx;
			.goodsInfoBox {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				height: 100%;
			}
			.title {
				color: #333333;
				font-size: 30rpx;
				font-weight: 600;
			}
			.data {
				margin-top: 8rpx;
				position: relative;
				.flex {
					display: flex;
					align-items: flex-end;
					.price {
						color: var(--primaryColor);
						font-size: 24rpx;
						margin-right: 20rpx;
						font-weight: 600;
						text {
							font-size: 32rpx;
						}
					}
					.original {
						color: #666;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
				.ratio {
					color: #666;
					font-size: 24rpx;
					margin-top: 8rpx;
					text:first-of-type {
						margin-right: 28rpx;
					}
				}
				.bottoBox {
					margin-top: 8rpx;
					.group {
						display: inline-block;
						font-size: 22rpx;
						color: var(--primaryColor);
						// background-color: var(--primaryColor);
						border: 1rpx solid var(--primaryColor);
						border-radius: 8rpx;
						padding: 0 4rpx;
						font-size: 24rpx;
					}
					.subsidy {
						display: inline-block;
						font-size: 22rpx;
						text{
							color: var(--primaryColor);
						}
						.line {
							color: #333333;
							margin: 0 8rpx;
						}
					}
				}
				.btn {
					background: var(--btnBgColor);
					position: absolute;
					bottom: 0;
					right: 0;
					border-radius: 40rpx;
				}
				.car {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 48rpx;
					height: 48rpx;
					border-radius: 40rpx;
					background: #ffe5e5;
				}
			}
		}
	}
}
</style>
